<template>
	<view class="page">
		<view class="bg"></view>
		<view class="content">
			<!-- 滚动列表 start -->
			<scroll-list ref="scrollListRef">
				<view cla class="scroll-list-item-box uv-flex-row">
					<view class="startEndGap"></view>
					<template v-for="(item,index) in list" :key="index">
						<view class="centerGap" v-if="index>0"></view>
						<scroll-list-item @click="clickItem(item)" :current-address="isActiveAddress(item)" :mark="item.type=='CUSTOM'?'自定义课程':item.mark" :logo="item.logo.path || item.logo" :name="item.name" :desc="item.chapterDesc" :progress="completeProgress(item)" />
					</template>
					<view class="centerGap"></view>
					<scroll-list-item custom @custom-click="addChapterRef.open()"></scroll-list-item>
					<view class="startEndGap"></view>
				</view>
			</scroll-list>
			<!-- 滚动列表 end -->
			<!-- ,{name: '指法从0到1',path: ''} -->
			<!-- 底部信息 start -->
			<foot :site="[{name: '银河系',path: ''}]"></foot>
			<!-- 底部信息 end -->
			<!-- 左底部操作 start -->
			<left-operate @show-guide="newUserGuideRef.open()" />
			<!-- 左底部操作 end -->
			<!-- 右侧底部操作 start -->
			<right-operate :course="lastLearnCourse" @add-chapter="addChapterRef.open()" />
			<!-- 右侧底部操作 end -->
		</view>
		<new-user-guide ref="newUserGuideRef" />
		<!-- 添加课程弹窗 -->
		<add-chapter-popup ref="addChapterRef" :selectChapterList="list" :chapterList="chapterListRes" @reloadData="getComplete" />
	</view>
</template>
<script setup>
	import { computed, ref, defineComponent, nextTick, watchEffect } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { checkLocalCharacter } from '@/common/js/character.js';
	import { userChapterComplateList, chapterList } from '@/common/api/list.js';
	import { getCourseLastActive } from '@/common/js/getData.js';
	import useInit from '@/common/hooks/useInit.js';
	import scrollList from './components/scroll-list.vue';
	import scrollListItem from './components/scroll-list-item.vue';
	import leftOperate from './components/left-operate.vue';
	import rightOperate from './components/right-operate.vue';
	import addChapterPopup from './components/add-chapter-popup.vue'
	useInit('reloadChapterData', getComplete);
	defineComponent({ scrollList, scrollListItem, leftOperate, rightOperate, addChapterPopup });
	const addChapter = ref(null);
	const chapterListRes = ref([]);
	const scrollListRef = ref(null);
	const addChapterRef = ref(null);
	const lastLearnCourse = ref(null);
	const newUserGuideRef = ref(null);
	try {
		checkLocalCharacter();
		uni.$emit('initData');
		// 获取最后选中课程
		getCourseLastActive();
		getComplete();
		// 获取全部章节数据，添加课程等地方使用
		getAllChapterList();
	} catch (e) {}
	// 章节列表
	const list = computed(() => {
		return getApp().globalData.dzdata?.userChapterList;
	})
	onShow(() => {
		// 滚动列表计算节点数据
		if (list.value?.length) {
			nextTick(() => {
				scrollListRef.value.getRect();
			})
		}
	})
	watchEffect(() => {
		// 滚动列表计算节点数据
		if (list.value?.length) {
			nextTick(() => {
				scrollListRef.value.getRect();
			})
		}
		lastLearnCourse.value = getApp().globalData.dzdata?.lastActive;
	})
	const completeResult = ref([]);
	// 是否显示错误类名
	const completeProgress = computed((item) => {
		return (item) => {
			const findItem = completeResult.value.find(item2 => item2.chapter == item.chapter);
			let completeCourseCount = 0;
			let courseCount = 1;
			if (findItem) {
				completeCourseCount = findItem.completeCourseCount;
				courseCount = findItem.courseCount;
			}
			return { completeCourseCount, courseCount };
		}
	})
	// 当前位置
	const isActiveAddress = computed((item) => {
		return item => {
			return getApp().globalData.dzdata?.lastActive?.chapter == item.chapter;
		}
	})
	// 获取完成度相关数据
	async function getComplete() {
		const { data } = await userChapterComplateList({
			characterId: getApp().globalData.dzcharacter?.character?.characterId,
			uid: uniCloud.getCurrentUserInfo().uid
		});
		completeResult.value = data;
	}
	// 获取完整数据
	async function getAllChapterList() {
		const { data } = await chapterList({ uid: uniCloud.getCurrentUserInfo().uid });
		chapterListRes.value = data;
		getApp().globalData.setdzdata('chapterList', data);
	}
	// 点击跳转
	function clickItem(item) {
		uni.$uv.route({
			url: '/map',
			params: {
				chapter: item.chapter
			}
		})
	}
</script>
<style>
	page {
		min-height: 100%;
	}
</style>
<style scoped lang="scss">
	.page {
		height: calc(100vh - 80px);
		background: linear-gradient(180deg, #1C1C1F 0%, #29292D 100%);
		&>.bg {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			width: 100%;
			height: 100%;
			background: url(/static/images/chapter/dot.svg);
			opacity: 0.06;
		}
		.content {
			position: relative;
			z-index: 2;
			.centerGap {
				width: 60px;
			}
			.startEndGap {
				width: 120px;
			}
		}
	}
	.scroll-list-item-box {
		justify-content: flex-start;
	}
	@media screen and (max-width: 1600px) {
		.page .content .centerGap {
			width: 60px;
		}
	}
	@media screen and (max-width: 1200px) {
		.page .content .centerGap {
			width: 40px;
		}
	}
</style>